<template>
  <!-- 通讯录 -->
  <div class="container contabox">
    <!--    <UnifyTitle/>-->
    <!-- 检索区 -->
    <div
      class="flex space-between bgFFF bdradius4"
      style="height: 100%"
    >
      <!-- 左侧区域菜单 -->
      <div
        class="tree-list bdrf2f2f2 pl5 pt15 pr5"
        style="width: 290px; overflow: auto"
      >
        <div class="block">
          <org-structure
            ref="orgStructure"
            requestName="departmentList"
            @search="onTreeSearch"
            @deptListData="getDeptListData"
          ></org-structure>
        </div>
      </div>
      <div
        class="btn-section"
        style="width: calc(100% - 300px)"
      >
        <!-- 表头区 -->
        <div class="flex bgFFF space-between mt10">
          <div class="flex flex-y-center">
            <div
              class="ml22"
              style="display: flex"
            >
              <el-button
                type="primary"
                @click="addManager()"
              >添加管理员</el-button>
              <!-- <button-menu @handleTongbu="synchronizationqywxtxl"></button-menu> -->
            </div>
          </div>
          <div class="flex flex-y-center">
            <div class="flex flex-y-center mr22 button">
              <Input
                v-model="criteria.userName"
                class="search-input"
                style="width: 180px; border-radius: 2px 0 0 2px"
                clearable
                @on-clear="onSearch"
                placeholder="请输入名称"
              ></Input>
              <Button
                slot="append"
                @click="onSearch"
                icon="ios-search"
                style="
                  background: #fff;
                  padding: 0;
                  color: #999;
                  min-width: auto;
                  border-left: 0;
                  border-radius: 0 2px 2px 0;
                "
              ></Button>
            </div>
          </div>
        </div>
        <!-- 列表区 -->
        <!-- <BaseTable
          ref="table"
          :loading="tableLoading"
          v-model="criteria"
          :columns="columns"
          :data="data"
          @on-search="departmentMemberList"
          @changeData="changeData"
        >
        </BaseTable>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br> -->
        <el-table
          :data="
            data.filter(
              (data) =>
                !search ||
                data.userName.toLowerCase().includes(search.toLowerCase())
            )
          "
          style="width: 100%"
        >
          <el-table-column
            label="用户姓名"
            prop="name"
          > </el-table-column>
          <el-table-column
            label="手机号"
            prop="mobile"
          > </el-table-column>
          <el-table-column
            label="所在单位"
            prop="deptName"
          >
            <template slot-scope="scope">
              {{ scope.row.deptName }}
            </template>
          </el-table-column>
          <el-table-column
            label="角色"
            prop="parentId"
            show-overflow-tooltip
          >
            <!-- <template slot-scope="scope">
              <span
                v-for="(item, index) in scope.row.roleList"
                :key="index"
              >
                {{
                  scope.row.roleList.length - 1 !== index
                    ? item.roleName + ","
                    : item.roleName
                }}
              </span>
            </template> -->
          </el-table-column>
          <el-table-column align="right">
            <template
              slot="header"
              slot-scope="scope"
            >
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"
              />
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="rolesEdit(scope.$index, scope.row)"
              >角色管理</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >区域管理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="->, total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
      
    </div>

    <!--  编辑抽屉  -->
    <base-modal
      ref="showDrawers"
      :loading="drawerLoading"
      v-model="showDrawers"
      @closeM="cancelBt('showDrawers')"
      @closeBt="cancelBt('showDrawers')"
      @submitBt="drawerSubmit"
      titleText="角色管理"
      :styles="{ width: '600px' }"
      class="roleModal"
    >
      <div class="flex flex-x-center">
        <Form
          ref="form"
          :rules="rules"
          :label-width="80"
          :model="form"
        >
          <!--          <FormItem prop="userName" label="用户姓名">
            <Input
              type="text"
              placeholder="请输入用户姓名"
              clearable
              maxlength="20"
              v-model="form.userName"
              style="width: 280px"
            /></FormItem>
          <FormItem prop="departmentIdList" label="单位">
            <Cascader
              placeholder="请选择单位"
              :data="deptListData"
              v-model="departmentIdList"
              style="width: 280px"
              change-on-select
              @on-change="cascaderChange"></Cascader>
          </FormItem>
          <FormItem prop="phone" label="联系电话">
            <Input
              type="text"
              placeholder="请输入联系电话"
              clearable
              maxlength="11"
              v-model="form.phone"
              style="width: 280px"
            /></FormItem>-->
          <FormItem
            prop="roleIdList"
            label="选择角色"
          >
            <Select
              v-model="form.roleIdList"
              multiple
              transfer
              style="width: 280px"
              placeholder="请选择角色"
            >
              <Option
                v-for="item in rolesList"
                :key="item.id"
                :value="item.id"
                :disabled="item.disabled"
              >
                {{ item.roleName }}
              </Option>
            </Select>
          </FormItem>
          <!--          <FormItem prop="enable" label="启用">
            <i-switch v-model="form.enable" :true-value="1" :false-value="0"></i-switch>
          </FormItem>-->
        </Form>
      </div>
    </base-modal>
    <!--  区域设置  -->
    <base-modal
      ref="areaModal"
      :loading="modalBtnLoading"
      v-model="areaModal"
      @closeM="cancelBt('areaModal')"
      @closeBt="cancelBt('areaModal')"
      @submitBt="okSave"
      titleText="区域管理"
      :styles="{ width: '800px' }"
      class="areaModal"
    >
      <Row :gutter="60">
        <Col
          span="12"
          style="border-right: 1px solid #eeeeee"
        >
        <Input
          type="text"
          v-model="areaSearchName"
          clearable
          placeholder="搜索区域"
        />
        <!-- <Tree :data="areaDeptListData" :render="renderContent" show-checkbox :check-strictly="true" multiple
                @on-check-change="treeCheckChange"></Tree> -->
        <el-tree
          :expand-on-click-node="false"
          check-on-click-node
          :data="areaDeptListData"
          :default-checked-keys="defaultcheckedkeys"
          show-checkbox
          :default-expanded-keys="defaultexpandedkeys"
          :check-strictly="true"
          node-key="qywechatDeptId"
          ref="trees"
          highlight-current
          @check="caozcheck"
          :filter-node-method="filterNode"
          style="height: 95%; overflow: auto; margin-top: 2%"
        >
        </el-tree>
        </Col>
        <Col
          span="12"
          style="overflow: auto"
        >
        <div class="color333 line16 mb26 mt6">
          已选：{{ treeCheckData.length }}个区域
        </div>
        <div>
          <div
            class="color333 line20 mb10"
            v-for="(item, index) in treeCheckData"
            :key="item.id"
          >
            {{ item.deptName }}
            <Icon
              type="md-close"
              color="#bbbbbb"
              size="12"
              class="ml10 curPointer"
              @click="removeTreeCheck(item, index)"
            />
          </div>
        </div>
        </Col>
      </Row>
    </base-modal>

    <el-dialog
      title="添加管理员"
      :visible.sync="addManagerDialog"
      :close-on-click-modal='false'
    >
      <el-form
        :model="addManagerForm"
        :rules="rules"
        ref="addManagerForm"
      >
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            v-model="addManagerForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="性别"
          :label-width="formLabelWidth"
          prop="memberSex"
        >
          <el-radio v-model="addManagerForm.memberSex" label="1">男</el-radio>
          <el-radio v-model="addManagerForm.memberSex" label="2">女</el-radio>
          <el-radio v-model="addManagerForm.memberSex" label="3">保密</el-radio>
        </el-form-item>
        <el-form-item
          label="手机号"
          :label-width="formLabelWidth"
          prop="mobile"
        >
          <el-input
            v-model="addManagerForm.mobile"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
        v-if="flag"
          label="角色"
          :label-width="formLabelWidth"
          prop="roleList"
        >
        <el-select v-model="valueInput" placeholder="请选择">
          <el-option
            @click.native="changeRole"
            v-for="item in role"
            :key="item.value"
            :label="item.roleName"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item
        v-if="flag"
          label="所在单位"
          :label-width="formLabelWidth"
          prop="qywechatDeptId"
        >
          <el-input
            v-model="addManagerForm.qywechatDeptId.deptName"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="out">取 消</el-button>
        <el-button
          type="primary"
          @click="addManagerSubmit('addManagerForm')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseDrawers from "_c/base-drawers/base-drawers";
import BaseModal from "_c/base-modal";
import orgStructure from "_c/orgStructure/orgStructure";
import FromOne from "@/libs/jss/FormValidation";
import { addDepartmentMember, getrole, memberList, compileDepartmentMember } from '@/api/data.js'

export default {
  components: {
    BaseDrawers,
    BaseModal,
    orgStructure,
  },
  data () {
    return {
      total: '',
      id: '',
      deptName: '',
      search: "",
      selectedData: {},
      formLabelWidth: "120px",
      value: '',
      valueInput: '',
      // 添加管理员表单
      addManagerForm: {
        // 姓名
        name: "",
        // 性别
        memberSex: '1',
        // 手机号
        mobile: '',
        // 角色
        roleList: [],
        // 所属单位
        qywechatDeptId: {},
      },
      addManagerDialog: false,
      defaultexpandedkeys: [],
      xuanzlist: [],
      defaultcheckedkeys: [],
      btnLoading: false,
      tableLoading: false,
      data: [], // 列表绑定数据
      page: {
        page: 1,
        pageSize: 5
      },
      /**
       * 查询条件
       */
      criteria: {
        total: 0,
        page: {
          current: 1,
          size: 10,
        },
        deptIdList: [], // 当前所选部门id
        userName: "无敌",
      },
      /**
       * 表格字段
       */
      columns: [
        {
          fixed: "left",
          title: "用户姓名",
          key: "userName",
          align: "left",
          minWidth: 125,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "所在单位",
          key: "departmentList",
          align: "left",
          minWidth: 125,
          render: (h, params) => {
            return h(
              "poptip",
              {
                props: {
                  trigger: "hover",
                  transfer: true,
                  placement: "bottom-start",
                },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: "100%",
                      textAlign: "left",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      verticalAlign: "middle",
                      display: "inline-block",
                    },
                  },
                  [
                    params.row.departmentList.map(function (item, index) {
                      return h(
                        "span",
                        item.deptName +
                        (index == params.row.departmentList.length - 1
                          ? ""
                          : "，")
                      );
                    }),
                  ]
                ),
                h(
                  "div",
                  {
                    slot: "content",
                    style: {
                      width: "100%",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      verticalAlign: "middle",
                      display: "inline-block",
                    },
                  },
                  [
                    params.row.departmentList.map(function (item) {
                      return h(
                        "div",
                        {
                          style: {
                            textAlign: "left",
                          },
                        },
                        item.deptName
                      );
                    }),
                  ]
                ),
              ]
            );
          },
        },
        /*{
          title: "联系方式",
          key: "",
          align: "left",
          minWidth: 125,
        },*/
        {
          title: "角色",
          key: "roleList",
          align: "left",
          minWidth: 125,
          render: (h, params) => {
            return h(
              "poptip",
              {
                props: {
                  trigger: "hover",
                  transfer: true,
                  placement: "bottom-start",
                },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: "100%",
                      textAlign: "left",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      verticalAlign: "middle",
                      display: "inline-block",
                    },
                  },
                  [
                    params.row.roleList.map(function (item, index) {
                      return h(
                        "span",
                        item.roleName +
                        (index == params.row.roleList.length - 1 ? "" : "，")
                      );
                    }),
                  ]
                ),
                h(
                  "div",
                  {
                    slot: "content",
                    style: {
                      width: "100%",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      verticalAlign: "middle",
                      display: "inline-block",
                    },
                  },
                  [
                    params.row.roleList.map(function (item) {
                      return h(
                        "div",
                        {
                          style: {
                            textAlign: "left",
                          },
                        },
                        item.roleName
                      );
                    }),
                  ]
                ),
              ]
            );
          },
        },
        /*{
          title: "启用",
          key: "enable",
          slot: "switch",
          align: "left",
          minWidth: 125,
        },*/
      ],
      areaModal: false,
      deptListData: [], // 树结构
      departmentIdList: [],
      areaDeptListData: [], // 区域设置 树结构
      areaSearchName: "",
      modalData: {},
      treeCheckData: [],
      modalBtnLoading: false,

      regs: /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/,
      // 角色
      rolesList: [],
      role: [],
      // 编辑
      showDrawers: false,
      drawerLoading: false,
      form: {},
      flag: true,
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        memberSex: [
          { required: true, message: "请输入性别", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            required: true,
            pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        roleList: [
          { required: true, message: "请选择您的角色", trigger: "blur" },
        ],
        // qywechatDeptId: [
        //   { min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur' }
        // ],
        /*userName: [{
          required: true,
          message: "请输入用户姓名",
          trigger: "blur"
        }],
        departmentIdList: [{
          type: "array",
          required: true.,
          message: "请选择单位",
          trigger: "blur"
        }],
        phone: [{
          required: true,
          message: "请输入正确的联系电话",
          trigger: "blur",
          validator: FromOne.FormValidate.FormOne().phone,
        }],*/
        roleIdList: [
          {
            type: "array",
            required: true,
            message: "请选择角色",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    areaSearchName (val) {
      // 搜索
      this.$refs.trees.filter(val);
    },
  },
  created () {
    let buttonMenu = this.buttonMenu(this.$route.name);
    console.log(buttonMenu.buttonRight[0]);
    console.log(this.$route.name);

    this.columns.push(this.columnMenu(buttonMenu.buttonRight, this, 200));
    console.log(this.columns);

    this.getRolesList();
    // 调用成员列表
    this.getMemberList()
  },
  methods: {
    handleSizeChange(e) {
      this.page.pageSize = e
      this.getMemberList()
    },
    handleCurrentChange(e) {
      this.page.page = e
      this.getMemberList()
    },
    // 获取成员列表
    async getMemberList() {
      const res = await memberList({
        page: {
          page: this.page.page,
          pagesize: this.page.pageSize
        },
        keywords: null
      })
      console.log('成员列表', res);
      this.data = res.records
      this.total = res.total
    },
    // 取消新增管理员
    out() {
      this.addManagerDialog = false
      this.addManagerForm =  {
        // 姓名
        name: "",
        // 性别
        memberSex: '1',
        // 手机号
        mobile: '',
        // 角色
        roleList: [],
        // 所属单位
        qywechatDeptId: {},
      },
      this.$refs.addManagerForm.clearValidate()
    },
    // 角色选项下拉框选中触发的事件
    changeRole(e) {
      // console.log(e);
      console.log('选项选中了');
      this.addManagerForm.roleList.pop()
      this.addManagerForm.roleList.push(this.valueInput)
    },
    // 枚举
    // stateFormat(data) {
    //   if (data == 1) {
    //     return "男";
    //   } else if (data == 2) {
    //     return "女";
    //   } else {
    //     return ""
    //   }
    // },
    // 添加新的部门成员
    async AddMember() {
      const res = await addDepartmentMember({
        name: this.addManagerForm.name,
        memberSex: this.addManagerForm.memberSex,
        mobile: this.addManagerForm.mobile,
        roleList: this.addManagerForm.roleList,
        qywechatDeptId: this.addManagerForm.qywechatDeptId.qywechatDeptId
      })
      console.log('添加新的部门成员', res);
      this.addManagerDialog = false
      this.getMemberList()
    },
    // 编辑部门成员
    async rolesEdit (i, data) {
      this.flag = false
      console.log(data);
      this.addManagerForm.name = data.name
      this.addManagerForm.memberSex = String(data.memberSex)
      this.addManagerForm.mobile = data.mobile
      this.id = data.memberId
      this.addManagerDialog = true
    },
    async addManagerSubmit (addManagerForm) {
      if (this.flag = true) {
        this.$refs[addManagerForm].validate(valid => {
        if (valid) {
          this.AddMember()
        } else {
          return false;
        }
      })
      } else {
        const res = await compileDepartmentMember({
          name: this.addManagerForm.name,
          memberSex: parseInt(this.addManagerForm.memberSex),
          mobile: this.addManagerForm.mobile,
          id: this.id
      })
      console.log('编辑部门成员', res);
      }
    },
    // 添加管理员
    async addManager () {
      this.flag = true
      this.addManagerDialog = true;
      this.addManagerForm.qywechatDeptId = this.selectedData
      console.log(this.selectedData);
      const res = await getrole({})
      console.log('管理员部分角色列表', res);
      this.role = res
    },
    caozcheck (e, r) {
      this.treeCheckData = r.checkedNodes;
      this.xuanzlist = r.checkedKeys;
    },
    // 区域管理 数据回显
    deep (node) {
      node.map((item) => {
        this.$set(item, "checked", false);
        if (this.treeCheckData.length) {
          this.treeCheckData.map((v) => {
            if (v.qywechatDeptId == item.qywechatDeptId) {
              this.$set(item, "checked", true);
            } else if (item.children.length) {
              this.deep(item.children);
            }
          });
        } else if (item.children.length) {
          this.deep(item.children);
        }
      });
    },
    getDeptListData (data) {
      this.deptListData = this.dataProcessing(data);
    },
    // 下拉框树结构数据处理
    dataProcessing (data) {
      data.forEach((item) => {
        item["label"] = item.deptName;
        item["value"] = item.qywechatDeptId.toString();
        if (item.children.length > 0) {
          this.dataProcessing(item.children);
        }
      });
      return data;
    },
    cascaderChange (data) {
      if (data.length) {
        this.form.departmentIdList = data[data.length - 1];
      } else {
        this.form.departmentIdList = "";
        this.departmentMemberList();
      }
    },
    onTreeSearch (data) {
      this.selectedData = data;
      this.
      this.criteria.deptIdList = data.deptIdSet.length
        ? data.deptIdSet
        : [data.qywechatDeptId];
      this.criteria.page.current = 1;
      this.criteria.total = 0;
      this.criteria.userName = "";
      this.departmentMemberList();
    },
    onSearch () {
      this.criteria.page.current = 1;
      this.criteria.total = 0;
      this.departmentMemberList();
    },
    // 员工列表
    async departmentMemberList () {
      this.tableLoading = true;
      const res = await getrole({})
      console.log('角色列表', res);
      this.deptList = res
      console.log('deptList', this.deptList);
    },
    // departmentMemberList () {
    //   this.tableLoading = true;
    //   let data = {
    //     ...this.criteria,
    //   };
    //   this.APIS.departmentMemberList(data)
    //     .then((res) => {
    //       this.tableLoading = false;
    //       if (res.code == 20000) {
    //         this.criteria.total = res.data.total;
    //         this.data = res.data.records;
    //         console.log(this.data);
    //       } else {
    //         this.$Message.error(res.message);
    //       }
    //     })
    //     .catch((err) => {
    //       this.tableLoading = false;
    //     });
    // },
    // 同步企业微信通讯录
    synchronizationqywxtxl () {
      this.btnLoading = true;
      this.APIS.addressbooks().then((res) => {
        this.btnLoading = false;
        if (res.code == 20000) {
          this.$Message.success("同步成功！");
          this.criteria = {
            total: 0,
            page: {
              current: 1,
              size: 10,
            },
            deptIdList: [], // 当前所选部门id
            userName: "",
          };
          this.$refs.orgStructure.departmentList();
        } else {
          this.$Message.error(res.message);
        }
      });
    },

    //角色
    getRolesList () {
      this.APIS.roleslist().then((res) => {
        this.rolesList = res.data;
      });
    },
    // 编辑//角色管理
    handleEdit (params) {
      console.log('数据', params);
      console.log('编辑');
      this.form = params;
      if (this.form.roleList) {
        this.form.roleIdList = this.form.roleList.map((item) => item.id);
      }
      if (this.form.departmentList) {
        this.form.departmentIdList = this.form.departmentList.map(
          (item) => item.id
        );
      }
      this.drawerLoading = false;
      if (this.rolesList.length) {
        this.rolesList.map((item) => {
          let parm = this.form.roleList.find(
            (v) => v.roleCode == item.roleCode
          );
          item.disabled = parm ? (parm.type == 1 ? true : false) : false;
          return item;
        });
      }
      this.showDrawers = true;
    },
    drawerSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.drawerLoading = true;
          let data = {
            userId: this.form.id,
            roleIdList: this.form.roleIdList,
          };
          this.APIS.userLoginUpdate(data).then((res) => {
            this.drawerLoading = false;
            if (res.code == 20000) {
              this.$Message.success("编辑成功");
              this.cancelBt("showDrawers");
              this.departmentMemberList();
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      });
    },
    changeData (data) {
      console.log(data);
    },
    renderContent (h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            color: "#333333",
          },
        },
        data.deptName
      );
    },
    treeCheckChange (data) {
      this.treeCheckData = data;
    },
    // 区域管理弹框右侧列表选项后的X
    removeTreeCheck (item, index) {
      this.treeCheckData.splice(index, 1);
      // for(let i = 0;i<this.defaultcheckedkeys.length;i++){
      //   if(item.qywechatDeptId == this.defaultcheckedkeys[i]){
      //     this.defaultcheckedkeys.splice(i, 1);
      //   }
      // }
      let choiseCheckList = this.$refs.trees.getCheckedNodes();
      choiseCheckList.forEach((items, inx) => {
        if (item.qywechatDeptId == items.qywechatDeptId) {
          choiseCheckList.splice(inx, 1);
          this.$nextTick(() => {
            this.$refs.trees.setCheckedNodes(choiseCheckList);
          });
        }
      });
      this.xuanzlist = [];
      choiseCheckList.forEach((items, inx) => {
        this.xuanzlist.push(items.qywechatDeptId);
      });
    },
    // 编辑 //区域管理
    handleManage (params) {
      console.log('编辑区域', params);
      this.modalData = params;
      this.managementRegionDetail(params);
    },
    managementRegionDetail (params) {
      this.APIS.managementRegionDetail({ userId: params.id }).then((res) => {
        if (res.code == 20000) {
          this.modalBtnLoading = false;
          this.areaDeptListData = JSON.parse(JSON.stringify(this.deptListData));
          this.treeCheckData = res.data;
          this.defaultcheckedkeys = [];
          for (let i = 0; i < res.data.length; i++) {
            this.defaultcheckedkeys.push(res.data[i].qywechatDeptId);
          }
          this.defaultexpandedkeys = [this.deptListData[0].qywechatDeptId];
          this.areaModal = true;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 搜索
    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    areaSearch () {
      this.APIS.departmentList({ name: this.areaSearchName }).then((res) => {
        if (res.code == 20000) {
          this.areaDeptListData = this.dataProcessing(res.data);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 关闭抽屉
    cancelBt (drawerName) {
      this[drawerName] = false;
    },
    // 审核通过
    okSave () {
      let data = {
        userId: this.modalData.id, //指定某个人
        deptIdList: this.xuanzlist,
      };
      // if (this.treeCheckData.length > 0) {
      //   data.deptIdList = this.treeCheckData.map(item => item.qywechatDeptId) //辖区id集合
      // }
      this.modalBtnLoading = true;
      this.APIS.managementRegion(data).then((res) => {
        this.modalBtnLoading = false;
        if (res.code == 20000) {
          this.$Message.success("设置成功！");
          this.areaModal = false;
          this.departmentMemberList();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "index";
.contabox {
  height: 100%;
  background: #fff;
  border-radius: 4px;
}
.roleModal {
  /deep/ .ivu-modal-body {
    height: 280px;
    padding: 30px;
    overflow: auto;
  }
}

.areaModal {
  /deep/ .ivu-modal-body {
    height: 390px;
    padding: 20px 30px;
    overflow: auto;
  }

  /deep/ .ivu-row,
  /deep/ .ivu-col {
    height: 100%;
  }
}
</style>
